<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ol {
            color: #fff;
        }

        ol,
        ul {
            display: flex;
        }

        li {
            list-style: none;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border-radius: 50%;
            margin-left: 10px;
        }

        li:nth-child(-n+6) {
            background-color: red;
        }

        li:last-child {
            background-color: skyblue;
        }

        p,
        h3 {
            color: rgb(22, 22, 22);
        }

        #h1 {
            color: #000;
        }
    </style>
</head>

<body>
    <h3>中奖号码：</h3>
    <ol id='luckyWrap'></ol>
    <h3>用户号码：</h3>
    <ol id='userWrap'></ol>
    <h3>中奖结果：<span id='h1'></span></h3>
    <input type="text">
    <input type="button" value='兑奖！'>
    <input type="button" value='机选一注'>

    <ul id='pendingWrap'></ul>

    <p>用户若没有自主输入号码，点击按钮后就为机选号码。</p>
    <script>
        const txt = document.querySelector('[type="text"]'); //输入框
        const btn = document.querySelectorAll('[type="button"]')[0]; // 兑奖按钮
        const againBtn = document.querySelectorAll('[type="button"]')[1]; // 再次购买


        // 用户号
        let user = {
            redBalls: [],
            blueBall: null
        }

        //中奖信息
        let luckyRedBalls = [],
            luckyBlueBall = null;


        //兑奖
        btn.onclick = function () {
            if (user.redBalls.length) {

            } else {
                [luckyRedBalls, luckyBlueBall] = createNumber(); // 中奖号码
                [user.redBalls, user.blueBall] = createNumber(); // 用户随机号码
                render(luckyRedBalls, luckyBlueBall, luckyWrap);
                render(user.redBalls, user.blueBall, userWrap);
                judge(luckyRedBalls, user.redBalls, luckyBlueBall, user.blueBall)
            }
        }


        //生成随机数
        function createNumber() {
            let s = new Set();
            while (s.size < 6) {
                s.add(random(1, 33));
            }
            let arr = [...s].sort((a, b) => a - b);
            let blue_arr = random(1, 16);
            return [arr, blue_arr];
        }
        //渲染
        function render(arr, number, ele) {
            let str = arr.map(item => `<li>${item}</li>`).join('');
            str += `<li>${number}</li>`;
            ele.innerHTML = str;
        }

        //判断
        function judge(luckyArr, userArr, luckyBlue, userBlue) {
            let count = luckyArr.filter(item => userArr.indexOf(item) != -1).length;
            // console.log('交集个数：', count);
            if (count == 6 && luckyBlue == userBlue) {
                h1.innerText = '钱(ni)太(zhong)多(bu)了，也封顶¥500万?';
            } else if (count == 6) {
                h1.innerText = '封顶¥500万';
            } else if (count == 5 && luckyBlue == userBlue) {
                h1.innerText = '¥3000';
            } else if (count == 5 || (count == 4 && luckyBlue == userBlue)) {
                h1.innerText = '¥200';
            } else if (count == 4 || (count == 3 && luckyBlue == userBlue)) {
                h1.innerText = '¥10';
            } else if ((count == 2 && luckyBlue == userBlue) || (count == 1 && luckyBlue == userBlue) || luckyBlue ==
                userBlue) {
                h1.innerText = '¥5';
            } else {
                h1.innerText = '啥也不是';
            }
        }



        // 用户输入
        text.onkeydown = function (event) {
            switch (event.keyCody) {
                case 13:
                    if (txt.value) {
                        if (txt.value >= 1 && txt.value <= 33 && user.redBalls.length < 6) {
                            let result = user.redBalls.some(item => user.redBalls.indexOf(txt.value) != -1);
                            if (!result) {
                                user.redBalls.push(txt.value);
                                user.redBalls = user.redBalls.sort((a, b) => a - b);
                                let li = document.createElement('li');
                                li.innerText = txt.value;
                                pendingWrap.appendChild(li);
                                console.log(user.redBalls);
                            }
                        } else { // 蓝球
                            if (txt.value >= 1 && txt.value <= 16) {
                                user.blueBall = txt.value;
                                let li = document.createElement('li');
                                li.innerText = txt.value;
                                pendingWrap.appendChild(li);
                                console.log(user);
                                txt.disabled = true;
                            }
                        }
                    }
                    txt.value = '';
                    break;
            }
        }



        //随机数函数
        function random(min, max) {
            if (!max) {
                [max, min] = [min, 0];
            }
            let number = parseInt(Math.random(min, max) * (max - min + 1) + min);
            return number;
        }
    </script>
</body>

</html>